<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>洋葱直播</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            color: #666;
            z-index: 1;
        }

        ul {
            list-style-type: none;
        }

        a {
            text-decoration: none;
        }
        a:focus{
            outline: none;
        }

        span, a {
            cursor: pointer;
        }

        #nav, #nav-holder {
            width: 100%;
            height: 60px;
        }

        #nav {
            z-index: 5;
            position: fixed;
            top: 0;
            background: white;
            box-shadow: #666666 0 0 6px;
            padding: 0;
        }

        .nav-contain, #logo-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .nav-contain, .page-contain {
            padding: 0;
            margin: 0 auto;
            width: 1100px;
            height: 100%;
        }

        .page-contain {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            position: relative;
            width: 1150px;
        }

        #logo > span {
            cursor: default;
            height: 40px;
            line-height: 40px;
            font-size: 30px;
            color: #0f88eb;
        }

        #logo-nav {
            width: 32%;
        }

        .nav-text {
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            color: #666;
        }

        #hot:hover > a, #new:hover > a, #classify:hover > span {
            color: #0f88eb;
        }

        #classify {
            position: relative;
        }

        #out-fake {
            height: 0;
            width: 140px;
            position: absolute;
            top: 20px;
            left: -50px;
        }

        #out-box {
            display: flex;
            overflow: hidden;
            box-shadow: #666666 0 3px 3px;
            position: absolute;
            top: 50px;
            left: -90px;
            background: white;
            border-radius: 0 0 10px 10px;
            padding: 0 20px;
            justify-content: space-between;
            flex-wrap: wrap;
            height: 0;
            width: 180px;
            transition: height .4s, opacity .4s;
        }

        .classify-text {
            font-size: 15px;
            color: lightslategrey;
            height: 0;
            opacity: 0;
            line-height: 35px;
            width: 90px;
            text-align: center;
            border-radius: 10px;
            transition: height .5s, opacity .4s, margin .5s;
        }

        .ma {
            margin-top: 10px;
        }

        .classify-text:hover {
            background: lightgray;
        }

        #classify:hover > #out-box {
            padding: 0 20px 20px 20px;
            height: 202px;
        }

        #classify:hover > #out-fake {
            height: 40px;
        }

        #classify:hover a {
            height: 35px;
            opacity: 1;
        }

        .box {
            position: relative;
            display: flex;
            width: 280px;
            height: 42px;
            margin: 0;
            padding: 0;
            align-items: center;
            justify-content: space-between;
        }

        .searchBox {
            display: flex;
            width: 200px;
            height: 33px;
            background: #f7f8fa;
            border-radius: 17.5px;
            border: solid 1px gainsboro;
            align-items: center;
            justify-content: space-between;
            -webkit-transition: width 0.3s, -webkit-transform 0.5s;
            transition: width 0.3s, transform 0.5s;
        }

        .innerInput {
            width: 100%;
            margin: 0 0 0 20px;
            padding: 0;
            border: 0;
            background: inherit;
            color: #666;
        }

        input::-moz-placeholder {
            color: darkgray;
        }

        #doSearch {
            position: absolute;
            right: 0;
            top: 1.5px;
            cursor: pointer;
            color: white;
            width: 50px;
            height: 37px;
            margin: 0;
            padding: 0;
            background: #0f88eb;
            border: 0;
            border-radius: 13px;
            text-align: center;
            line-height: 34px;
            -webkit-transition: all 0.2s;
            transition: all 0.2s;
        }

        #doSearch:hover {
            background: royalblue;
        }

        #doSearch:active {
            transform: scale(0.9);
        }

        .onInput {
            transform: scale(0.0);
        }

        .searchPic {
            display: flex;
            cursor: pointer;
            width: 32px;
            height: 32px;
            margin: 0 5px;
            padding: 0;
            border: 0;
            align-items: center;
            justify-content: center;
        }

        #account {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
        }

        #user-message {
            display: inline-block;
            height: 44px;
            width: 44px;
            border-radius: 44px;
            overflow: hidden;
            transition: .3s;
            transform-origin: 50% 0;
        }

        #account:hover #user-message {
            transform: translate(0, 16px) scale(1.6);
        }

        #account:hover #user-down {
            height: 228px;
        }

        #user-down {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            z-index: -1;
            position: absolute;
            top: 52px;
            right: -103px;
            width: 250px;
            box-shadow: #666666 0 3px 3px;
            background: white;
            border-radius: 0 0 10px 10px;
            transition: .4s;
            height: 0;
            overflow: hidden;
        }

        #user-name {
            cursor: default;
            width: 100px;
            margin-top: 45px;
            margin-bottom: 15px;
            text-align: center;
        }

        .user-ch {
            color: darkgrey;
            cursor: pointer;
            width: 210px;
            text-align: center;
            margin-bottom: 20px;
        }

        #logout:hover {
            color: #0f88eb;
        }

        #logout {

            border-top: solid 1px lightgray;
            padding-top: 20px;
        }

        .span-left {
            float: left;
        }

        .span-right {
            float: right;
        }

        footer {
            font-size: 14px;
            color: darkgray;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin: 20px auto;
            margin-bottom: 40px;
        }

        footer>span{
            width: 100%;
            text-align: center;
        }

        #pro-name{
            font-size: 18px;
            margin-bottom: 10px;
        }

        #room-show {
            z-index: 3;
            width: 100%;
            padding-top: 10px;
            padding-bottom: 20px;
            margin-bottom: 30px;
            background: #72CAF2;
            /*background: url("../picture-for-live/background.jpg") -230px;*/
        }

        .page-contain {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            position: relative;
            padding: 0;
            margin: 0 auto;
            width: 1260px;
            height: 100%;
        }

        video {
            object-fit: fill;
        }

        #video-contain{
            height: 610px;
            border-radius: 10px;
            padding:0;
        }

        #live-msg{
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin: 10px 20px;
            height: 60px;

        }

        #au-pic{
            width: 60px;
            height: 60px;
            border-radius: 30px;
        }

        #an-con{
            margin-left: 10px;
        }

        #live-name{
            display: block;
            font-size: 16px;
            color: #151515;
            margin: auto 10px;
        }

        #name-con,#author-con{
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        #author-con{
            margin-top: 5px;
        }

        #author{
            margin-left: 10px;
            font-size: 13px;
            color: #666666;
        }

        #up{
            margin-left: 10px;
            border: solid 1px #0f88eb;
            border-radius: 9px;
            height: 15px;
            line-height: 11px;
            width: 35px;
            color: #0f88eb;
            text-align: center;
            font-size: 16px;
        }

        #video-contain, #comments{
            background: #FFFFFF;
        }

        #comments{
            width: 300px;
            height: 610px;
            border-radius: 10px;
            overflow: hidden;
        }

        #comments-area{
            width: 320px;
            height: 410px;
            overflow-x: hidden;
            overflow-y: scroll;
            margin-top: 80px;
        }

        #comments-area, #put-comments{
            background: #F8F8F8;
        }

        .s-coment{
            margin: 8px 10px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }

        .camp-z, .camp-f{
            margin-left: 10px;
            border-radius: 4px;
            height: 15px;
            line-height: 15px;
            width: 35px;
            text-align: center;
            font-size: 14px;
        }

        .camp-z{
            border: solid 1px #0f88eb;
            color: #0f88eb;
        }

        .camp-f{
            border: solid 1px red;
            color: red;
        }

        .comment,.looker{
            font-size: 14px;
            color: #151515;
            margin-left: 3px;
        }

        .comment{
            margin-left: 10px;
        }

        .looker{
            color: #0f88eb;
        }

        #put-comments{
            position: relative;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            height: 120px;
            border-radius: 0 0 10px 10px;
            width: 100%;
            border-top: 1px solid white;
        }

        #put{
            width: 260px;
            height: 40px;
        }

        #put-bu{
            cursor: pointer;
            color: white;
            background: #72CAF2;
            height: 26px;
            width: 80px;
            border: 0;
            font-size: 16px;
            border-radius: 5px;
            margin-left: 185px;
            margin-bottom: 10px;
        }

        #bad{
            cursor: pointer;
            color: white;
            background: red;
            height: 26px;
            width: 80px;
            border: 0;
            font-size: 16px;
            border-radius: 5px;
            position: absolute;
            left: 20px;
            bottom: 20px;
        }

        #back-home{
            color: #0f88eb;
        }

    </style>
    <script>
        //搜索栏效果
        function search(x) {
            let doButton = document.getElementById('doSearch');
            let box = document.getElementsByClassName('searchBox')[0];
            let co = document.getElementById('svgOne');
            if (x === 1) {
                box.style.background = 'white';
                doButton.className = 'onInput';
                box.style.width = '290px';
                co.style.fill = '#0f88eb';
            } else {
                box.style.width = '200px';
                box.style.background = '#f7f8fa';
                doButton.className = '';
                co.style.fill = '#8590A6';
            }
        }

        window.onload = function () {
            let liveFakes = document.getElementsByClassName('live-pic-fake');
            let livePics = document.getElementsByClassName('live-pic-show');
            for (let i = 0; i < livePics.length; i++) {

                liveFakes[i].onmouseout = function () {
                    livePics[i].style.display = 'flex';
                    livePics[i].style.animation = 'for-live-out .3s';
                    setTimeout(function () {
                        livePics[i].style.display = 'none';
                    }, 300);
                }
            }

            //轮询获取评论
            var cArea = document.getElementById('comments-area');
            var commentsArea = $(document.getElementById('comments-area'));
            setInterval(function () {
                $.post("comments/getComments",{
                    nickName: document.getElementById('author').innerText,
                    videoName: document.getElementById('live-name').innerText
                }).done(function (data) {
                    var count = commentsArea.children('.s-coment').length;
                    let leng = data.commentList.length;
                    if(leng - count > 0) {
                        let posi = 0;
                        for (let x of data.commentList) {
                            if (posi === leng - count) {
                                break
                            }
                            if (x.mode === 1) {
                                node = '<div class="s-coment"><span class="camp-z">正方</span><span class="comment"></span></div>'
                            } else {
                                node = '<div class="s-coment"><span class="camp-f">反方</span><span class="comment"></span></div>'
                            }
                            commentsArea.append(node);
                            let con = x.content;
                            cArea.lastElementChild.lastElementChild.innerText = con;
                            posi++;
                        }
                    }
                });
            }, 1000);

            //冗余，不应该这么写，
            var putConment = document.getElementById('put-bu');
            putConment.onclick = function () {
                $.post("/temp_comments/uploadTempComments",{
                    nickName: document.getElementById('user-name').innerText,
                    commment: document.getElementById('put').innerText,
                    positve: "true"
            });
            };
            var putAnConment = document.getElementById('put-bu');
            putAnConment.onclick = function () {
                $.post("/temp_comments/uploadTempComments",{
                    nickName: document.getElementById('user-name').innerText,
                    commment: document.getElementById('put').innerText,
                    positve: "false"
                });
            };

        }

    </script>
</head>

<body>
<div id="nav-holder"></div>
<div id="nav">
    <div class="nav-contain">
        <div id="logo-nav">
            <div id="logo">
                <span>洋葱直播</span>
            </div>
            <nav id="hot">
                <a href="/home" class="nav-text" id="back-home">主页</a>
            </nav>
            <nav id="new">
                <a href="#" target="_blank" class="nav-text">最新</a>
            </nav>
            <nav id="classify">
                <span class="nav-text">分类</span>
                <div id="out-fake"></div>
                <div id="out-box">
                    <a href="#" target="_blank" class="classify-text ma">
                        推荐主播
                    </a>
                    <a href="#" target="_blank" class="classify-text ma">
                        唱见舞见
                    </a>
                    <a href="#" target="_blank" class="classify-text">
                        御宅文化
                    </a>
                    <a href="#" target="_blank" class="classify-text">
                        网络游戏
                    </a>
                    <a href="#" target="_blank" class="classify-text">
                        手游直播
                    </a>
                    <a href="#" target="_blank" class="classify-text">
                        单机联机
                    </a>
                    <a href="#" target="_blank" class="classify-text">
                        电子竞技
                    </a>
                    <a href="#" target="_blank" class="classify-text">
                        生活娱乐
                    </a>
                    <a href="#" target="_blank" class="classify-text">
                        绘画专区
                    </a>
                </div>
            </nav>
        </div>
        <div class="box">
            <div class="searchBox">
                <input onfocus="search(1)" onblur="search(0)" class="innerInput" name="key"
                       placeholder="许下你的愿望吧~">
                <div class="searchPic">
                    <svg fill="#8590A6" id="svgOne" version="1.1" xmlns="http://www.w3.org/2000/svg" width="40px"
                         height="40px" viewBox="-318.5 -318.5 60 60">
                        <g>
                            <path d="M-272.213-276.454l-6.833-6.833c-0.513-0.513-1.167-0.788-1.836-0.852c2.059-2.568,3.298-5.82,3.298-9.36  c0-8.271-6.729-15-15-15s-15,6.729-15,15s6.729,15,15,15c3.121,0,6.021-0.96,8.424-2.597c0.017,0.744,0.304,1.483,0.872,2.051  l6.833,6.833c0.585,0.586,1.354,0.879,2.121,0.879s1.536-0.293,2.121-0.879C-271.041-273.383-271.041-275.282-272.213-276.454z   M-292.584-283.499c-5.514,0-10-4.486-10-10s4.486-10,10-10s10,4.486,10,10S-287.07-283.499-292.584-283.499z"></path>
                        </g>
                    </svg>
                </div>
            </div>
            <button id="doSearch">
                上传
            </button>
        </div>
        <div id="account">
            <a href="#" target="_blank" id="user-message">
                <img src="../picture/userPic.jpg" width="44px" height="44px">
            </a>
            <div id="user-down">
                <div id="user-name">
                    #(nickName)
                </div>
                <!--<div class="user-ch">-->
                <!--<span class="span-left">性别：</span>-->
                <!--<span class="span-right">男</span>-->
                <!--</div>-->
                <div class="user-ch">
                    <span class="span-left">手机：</span>
                    <span class="span-right">#(phoneNum)</span>
                </div>
                <div id="logout" class="user-ch">
                    退出登录
                </div>
            </div>
        </div>
    </div>
</div>
<div id="room-show">
    <div class="page-contain">
        <div id="video-contain">
            <div id="live-msg">
                <img id="au-pic" src="../picture/userPic.jpg">
                <div id="an-con">
                    <div id="name-con">
                        <span id="live-name">
                            #(data.msg.video_name)
                        </span>
                    </div>
                    <div id="author-con">
                        <span id="up">
                            up
                        </span>
                        <span id="author">
                            #(data.msg.nick_name)
                        </span>
                    </div>
                </div>
            </div>
            <video src="http://112.74.182.83:8080/#(data.msg.nick_name)/#(data.msg.video_name).#(data.msg.video_format)" width="950" height="530" loop controls autoplay
                   poster="../picture/vedioDefault.jpg">
                您的浏览器不支持，请使用火狐或者新版其他浏览器
            </video>
        </div>
        <div id="comments">
            <div id="comments-area"></div>
            <div id="put-comments" >
                <input type="text" placeholder="发表伟论~" id="put">
                <button id="put-bu">
                    正方发表
                </button>
                <button id="bad">
                    反方发表
                </button>
            </div>
        </div>
    </div>
</div>
<footer>
    <span id="pro-name">洋葱直播</span>
    <span>Copyright © none  联系作者@Mr.Liu<1368209598@qq.com></span>
</footer>
<script type="text/javascript" src="../js/jq/jquery-3.2.1.js"></script>

</body>
</html>